iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0
Modern Web

三十天持續努力挑戰py系列 第 15

Day_15 Html table 的基本教學

  • 分享至 

  • xImage
  •  
  • HTML 表格(Table)是一種用於在網頁上呈現和組織數據的HTML元素。表格由行(Rows)和列(Columns)組成,它們交匯形成單元格(Cells),每個單元格可以包含文本、圖像或其他HTML元素。HTML表格用於以表格形式展示數據,常見於網站中的數據報表、排行榜、時間表等,是可以使你更方便的操控元件擺放。

以下是一個HTML表格的基本結構:

    <table>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <!-- 更多表頭列 -->
        </tr>
        <tr>
            <td>數據1</td>
            <td>數據2</td>
            <!-- 更多數據列 -->
        </tr>
        <!-- 更多行 -->
    </table>
  • table:定義整個表格。

  • tr:定義表格中的行(行數)。

  • th:定義表頭單元格,通常位於第一行,用於標識每列的標題。

  • td:定義數據單元格,包含實際的數據。

  • 表格可以包含多個行和列,根據需要擴展。

      ```
      <!DOCTYPE html>
      <html>
      <head>
          <title>季節和降水量</title>
      </head>
      <body>
          <h1>內容</h1>
          <table border="1">
              <tr>
                  <th>季節</th>
                  <th>平均降水量(毫米)</th>
              </tr>
              <tr>
                  <td>春季</td>
                  <td>200</td>
              </tr>
              <tr>
                  <td>夏季</td>
                  <td>300</td>
              </tr>
              <tr>
                  <td>秋季</td>
                  <td>150</td>
              </tr>
              <tr>
                  <td>冬季</td>
                  <td>50</td>
              </tr>
          </table>
      </body>
      </html>
      ```
    
  • 如果是在vscode裡面創建表格的話,有可以快速創建的指令。輸入"tr2>td4";即會跑出以下此格式,可以讓你更快速方便的調整表格。


        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
  • 以下還有幾種常用的功能,框線、合併...
    table, th, td {
        border: 1px solid black;
        border-style: dashed;
        border-collapse: collapse;
    }

https://ithelp.ithome.com.tw/upload/images/20230913/201621700Ico9rm26D.png

  • border-collapse的屬性可以讓雙框變成單框,border-style可以更改其樣式,常見的有dashed、dashed、double...

上一篇
Day_14 SCSS & SASS 的基本架構示例
下一篇
Day_16 Lambda基本使用方法
系列文
三十天持續努力挑戰py30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言